<template>
	<view class="login">
		<view>{{title}}</view>
		<view class="row">
			<view>邮箱：</view>
			<input class="input-text" placeholder="请输入邮箱" @input="onEmail" />
		</view>
		<view class="row">
			<view>密码：</view>
			<input class="input-text" type="password" placeholder="请输入密码" @input="onPwd" />
		</view>
		<view class="row">
			<button type="default" @click="login">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				email: '',
				password: ''
			}
		},
		// 一进入页面加载的声明周期
		onLoad() {
			console.log('login init')
		},
		methods: {
			onEmail: function(event) {
				// 你输入的内容可以通过 event.target.value 获取
				this.email = event.target.value
			},
			onPwd: function(event) {
				this.password = event.target.value
			},
			login() {
				if (this.email.trim() == ''||this.password.trim() == '') {
					uni.showToast({
						title: '邮箱密码必填',
						duration: 2000,
						icon: 'error'
					});
					return;
				}
				uni.request({
					method: "POST",
				    url: 'https://api.shop.eduwork.cn/api/auth/login', //仅为示例，并非真实接口地址。
				    data: {
				        email: this.email,
						password: this.password
				    },
				    success: (res) => {
				        console.log(res);
						if(res.data.statusCode==200) {
							// 结构的意义实际上是把 res.data.token 的值拿出来，
							// 赋值给一个变量，变量名叫 access_token
							let {access_token} = res.data;
							uni.setStorageSync('token',access_token);
							uni.showToast({
								title: "登录成功",
								duration: 3000
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/tabBar/index/index'
								})
							},3000)
							// uni.switchTab({
							// 	url: '/pages/tabBar/index/index'
							// });
						}else{
							uni.showToast({
								title: '登录失败',
								icon: 'error'
							});
						}
				    }
				});
				// uni.showModal({
				// 	title: '校验成功',
				// 	content: '这是一个模态弹窗',
				// 	success: function (res) {
				// 		console.log(res)
				// 		if (res.confirm) {
				// 			console.log('用户点击确定');
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });
			}
		}
	}
</script>

<style scope>
	.row {
		display: flex;
		margin: 10px;
	}
	
	/* 可以使用750rpx 来代替100% */
	.input-text {
		width: 500rpx;
		height: 50rpx;
		border: 1px solid #007AFF;
		border-radius: 5px;
	}
</style>